<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>月度考勤模版</title>
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2980b9;
            --success-color: #2ecc71;
            --warning-color: #f39c12;
            --danger-color: #e74c3c;
            --light-color: #ecf0f1;
            --dark-color: #34495e;
            --border-color: #bdc3c7;
            --text-color: #2c3e50;
            --weekend-color: #f8f9fa;
            --holiday-color: #fff5f5;
            --workday-color: #f5fff5;
        }
        
        body {
            font-family: 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #fff;
            padding-right: 220px;
            position: relative;
            color: var(--text-color);
            line-height: 1.6;
        }
        
        .container {
            max-width: 1100px;
            margin: 0 auto;
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            position: relative;
            z-index: 1;
        }
        
        .control-panel {
            position: fixed;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
            width: 180px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            z-index: 100;
            border: 1px solid var(--border-color);
        }
        
        .control-group {
            display: flex;
            flex-direction: column;
        }
        
        label {
            margin-bottom: 6px;
            font-weight: 600;
            color: var(--dark-color);
            font-size: 13px;
        }
        
        select, input, button, textarea {
            padding: 5px 2px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            font-size: 14px;
            transition: all 0.2s;
        }
        
        select:focus, input:focus, textarea:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }
        
        button {
            color: white;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 600;
            height: 38px;
            border-radius: 6px;
            font-size: 14px;
        }
        
        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        #result {
            overflow-x: auto;
            position: relative;
        }
        
        table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            overflow: hidden;
        }
        
        th, td {
            border: 1px solid var(--border-color);
            padding: 5px 1px;
            text-align: center;
            vertical-align: middle;
        }
        
        th {
            background-color: var(--primary-color);
            color: white;
            font-weight: 600;
            position: sticky;
            top: 0;
        }
        
        tr:nth-child(even) {
            background-color: rgba(236, 240, 241, 0.5);
        }
        
        tr:hover {
            background-color: rgba(52, 152, 219, 0.1);
        }
        
        .status {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 600;
        }
        
        .normal {
            background-color: rgba(46, 204, 113, 0.1);
            color: var(--success-color);
        }
        
        .late {
            background-color: rgba(243, 156, 18, 0.1);
            color: var(--warning-color);
        }
        
        .early {
            background-color: rgba(241, 196, 15, 0.1);
            color: #f1c40f;
        }
        
        .absent {
            background-color: rgba(231, 76, 60, 0.1);
            color: var(--danger-color);
        }
        
        .weekend {
            background-color: var(--weekend-color);
        }
        
        .holiday {
            background-color: var(--holiday-color);
        }
        
        .workday {
            background-color: var(--workday-color);
        }
        
        .generate-btn {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
        }
        
        .print-btn {
            background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
        }
        
        .signature-btn {
            background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%);
        }
        
        .clear-btn {
            background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
        }
        
        .title {
            text-align: center;
            color: var(--dark-color);
        }
        
        .title h2 {
            margin: 0;
            font-size: 24px;
            font-weight: 700;
            color: var(--primary-color);
            position: relative;
            display: inline-block;
            padding-bottom: 10px;
        }
        
        .attendance-notes {
            margin-top: 30px;
            padding: 20px;
            background-color: var(--light-color);
            border-radius: 8px;
            line-height: 1.6;
            border-left: 4px solid var(--primary-color);
        }
        
        .attendance-notes h4 {
            margin-top: 0;
            margin-bottom: 15px;
            color: var(--dark-color);
        }
        
        .attendance-notes p {
            margin: 8px 0;
            font-size: 14px;
        }
        
        .attendance-footer {
            margin-top: 40px;
            display: flex;
            flex-direction: column;
            padding-bottom: 10px;
            border-bottom: 1px dotted #bdc3c7;
        }
        
        .signature-area {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(2px);
        }
        
        .modal-content {
            background-color: #fefefe;
            margin: 10% auto;
            padding: 25px;
            border: none;
            width: 80%;
            max-width: 500px;
            border-radius: 10px;
            position: relative;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            position: absolute;
            top: 10px;
            right: 15px;
            transition: color 0.2s;
        }
        
        .close:hover,
        .close:focus {
            color: var(--danger-color);
            text-decoration: none;
            cursor: pointer;
        }
        
        .modal-title {
            margin-top: 0;
            margin-bottom: 20px;
            color: var(--dark-color);
            font-size: 20px;
        }
        
        .modal-section {
            margin-bottom: 20px;
            text-align: center;
        }
        
        .modal-section h5 {
            margin-top: 0;
            margin-bottom: 15px;
            color: var(--dark-color);
            font-size: 16px;
        }
        
        .signature-canvas {
            border: 1px solid var(--border-color);
            margin-top: 10px;
            background-color: #fff;
            border-radius: 6px;
            height: 120px;
            cursor: crosshair;
        }
        
        .signature-controls {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }
        
        .signature-image {
            max-width: 100%;
            max-height: 120px;
            margin-top: 10px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            display: none;
        }
        
        .file-input-wrapper {
            position: relative;
            overflow: hidden;
            display: inline-block;
            width: 100%;
        }
        
        .file-input-wrapper input[type="file"] {
            font-size: 100px;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }

        .signature-time{
            display: flex;
            justify-content: flex-end;
        }
        
        .file-input-btn {
            display: inline-block;
            padding: 8px 12px;
            background-color: var(--light-color);
            color: var(--dark-color);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            text-align: center;
            width: 100%;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .file-input-btn:hover {
            background-color: #e0e0e0;
        }
        
        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 25px;
        }
        
        .modal-btn {
            padding: 8px 16px;
            border-radius: 6px;
            font-weight: 600;
            border: none;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .modal-btn-cancel {
            background-color: var(--light-color);
            color: var(--dark-color);
        }
        
        .modal-btn-cancel:hover {
            background-color: #e0e0e0;
        }
        
        .modal-btn-confirm {
            background-color: var(--primary-color);
            color: white;
        }
        
        .modal-btn-confirm:hover {
            background-color: var(--secondary-color);
        }
        
        @media print {
            .no-print {
                display: none !important;
            }
            
            body, .container {
                background-color: white;
                padding: 0;
                margin: 0;
            }
            
            .container {
                box-shadow: none;
                border-radius: 0;
            }
            
            table {
                page-break-inside: auto;
                box-shadow: none;
            }
            
            tr {
                page-break-inside: avoid;
                page-break-after: auto;
            }
            
            th {
                background-color: var(--primary-color) !important;
                color: white !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
            
            .attendance-notes, .attendance-footer {
                page-break-before: avoid;
            }
            
            .status {
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
        }
        
        @media (max-width: 992px) {
            body {
                padding-right: 20px;
                padding-bottom: 250px;
            }
            
            .control-panel {
                top: auto;
                bottom: 20px;
                left: 50%;
                transform: translateX(-50%);
                width: calc(100% - 80px);
                max-width: 500px;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
            }
            
            .control-group {
                width: 45%;
                min-width: 150px;
            }
            
            .container {
                padding: 20px;
            }
        }
        
        @media (max-width: 576px) {
            .container {
                padding: 15px;
            }
            
            .control-panel {
                width: calc(100% - 40px);
                padding: 15px;
            }
            
            .control-group {
                width: 100%;
            }
            
            .attendance-footer {
                flex-direction: column;
                gap: 15px;
            }
            
            .signature-area {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .modal-content {
                width: 90%;
                margin: 20% auto;
                padding: 20px;
            }
            
            th, td {
                padding: 2px 1px;
                font-size: 13px;
            }
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .container {
            animation: fadeIn 0.3s ease-out;
        }
        
        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }
        
        /* 工具提示样式 */
        [data-tooltip] {
            position: relative;
            cursor: pointer;
        }
        
        [data-tooltip]:hover:after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--dark-color);
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 100;
            margin-bottom: 5px;
        }
        
        [data-tooltip]:hover:before {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            border-width: 5px;
            border-style: solid;
            border-color: var(--dark-color) transparent transparent transparent;
            margin-bottom: -5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="result"></div>
    </div>

    <div class="control-panel no-print">
        <div class="control-group">
            <label for="employeeName">姓名(多个用 , 隔开):</label>
            <input type="text" id="employeeName" value="" placeholder="输入姓名，用‘,’分隔">
        </div>
        
        <div class="control-group">
            <label for="department">部门:</label>
            <input type="text" id="department" value="技术部">
        </div>
        
        <div class="control-group">
            <label for="year">年份:</label>
            <select id="year"></select>
        </div>
        
        <div class="control-group">
            <label for="month">月份:</label>
            <select id="month">
                <option value="1">1月</option>
                <option value="2">2月</option>
                <option value="3">3月</option>
                <option value="4">4月</option>
                <option value="5">5月</option>
                <option value="6">6月</option>
                <option value="7">7月</option>
                <option value="8">8月</option>
                <option value="9">9月</option>
                <option value="10">10月</option>
                <option value="11">11月</option>
                <option value="12">12月</option>
            </select>
        </div>
        
        <div class="control-group">
            <label for="startDate">开始日期:</label>
            <input type="number" id="startDate" min="1" max="31" value="1" placeholder="1-31">
        </div>
        
        <div class="control-group">
            <label for="endDate">结束日期:</label>
            <input type="number" id="endDate" min="1" max="31" value="31" placeholder="1-31">
        </div>
        
        <div class="control-group">
            <label for="holidaySettings">节假日设置:</label>
            <textarea id="holidaySettings" rows="3" placeholder="格式:月-日=节假日名称，如:1-1=元旦"></textarea>
        </div>
        
        <div class="control-group">
            <label for="workdaySettings">补班日期设置:</label>
            <textarea id="workdaySettings" rows="3" placeholder="格式:月-日=补班说明，如:2-4=春节补班"></textarea>
        </div>
        
        <button id="generateBtn" class="generate-btn">考勤查询</button>
        <button id="signatureBtn" class="signature-btn">签名确认</button>
        <button id="clearSignatureBtn" class="clear-btn">清除签名</button>
        <button id="printBtn" class="print-btn">考勤打印</button>
    </div>

    <!-- 签名模态框 -->
    <div id="signatureModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h3 class="modal-title">签名确认</h3>
            
            <div class="modal-section">
                <h5>手写签字：</h5>
                <canvas id="modalSignatureCanvas" class="signature-canvas" height="120"></canvas>
                <div class="signature-controls">
                    <button id="modalClearSignature" class="modal-btn modal-btn-cancel">清除签字</button>
                </div>
            </div>
            
            <div class="modal-section">
                <h5>或选择本地图片：</h5>
                <div class="file-input-wrapper">
                    <button class="file-input-btn">选择签名图片</button>
                    <input type="file" id="modalSignatureFile" accept="image/*">
                </div>
                <img id="modalSignaturePreview" class="signature-image" alt="签名预览">
            </div>
            
            <div class="modal-footer">
                <button id="modalCancel" class="modal-btn modal-btn-cancel">取消</button>
                <button id="modalConfirm" class="modal-btn modal-btn-confirm">确定</button>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 设置当前月份为默认值
            const currentDate = new Date();
            document.getElementById('month').value = currentDate.getMonth() + 1;
            
            // 动态生成年份选项（当前年份前后各两年）
            const yearSelect = document.getElementById('year');
            const currentYear = currentDate.getFullYear();
            
            for (let year = currentYear - 2; year <= currentYear + 2; year++) {
                const option = document.createElement('option');
                option.value = year;
                option.textContent = year + '年';
                if (year === currentYear) {
                    option.selected = true;
                }
                yearSelect.appendChild(option);
            }
            
            // 生成按钮点击事件
            document.getElementById('generateBtn').addEventListener('click', generateAttendance);
            
            // 签名按钮点击事件
            document.getElementById('signatureBtn').addEventListener('click', openModal);
            
            // 打印按钮点击事件
            document.getElementById('printBtn').addEventListener('click', function() {
                window.print();
            });
            
            // 清除签名按钮点击事件
            document.getElementById('clearSignatureBtn').addEventListener('click', clearSignature);
            
            // 签名相关变量
            let signatureData = null;
            let signatureImage = null;
            
            // 模态框相关元素
            const modal = document.getElementById('signatureModal');
            const closeBtn = document.querySelector('.close');
            const cancelBtn = document.getElementById('modalCancel');
            const confirmBtn = document.getElementById('modalConfirm');
            
            // 初始化签名画布
            function initSignatureCanvas() {
                // 获取模态框中的画布
                const canvas = document.getElementById('modalSignatureCanvas');
                const ctx = canvas.getContext('2d');
                let isDrawing = false;
                let lastX = 0;
                let lastY = 0;
                
                // 设置画布样式
                ctx.strokeStyle = '#000';
                ctx.lineWidth = 2;
                ctx.lineCap = 'round';
                ctx.lineJoin = 'round';
                
                // 鼠标事件
                canvas.addEventListener('mousedown', startDrawing);
                canvas.addEventListener('mousemove', draw);
                canvas.addEventListener('mouseup', stopDrawing);
                canvas.addEventListener('mouseout', stopDrawing);
                
                // 触摸事件
                canvas.addEventListener('touchstart', handleTouchStart, { passive: false });
                canvas.addEventListener('touchmove', handleTouchMove, { passive: false });
                canvas.addEventListener('touchend', stopDrawing);
                canvas.addEventListener('touchcancel', stopDrawing);
                
                // 清除按钮
                document.getElementById('modalClearSignature').addEventListener('click', clearSignatureCanvas);
                
                // 文件上传
                document.getElementById('modalSignatureFile').addEventListener('change', handleFileSelect);
                
                // 开始绘制
                function startDrawing(e) {
                    isDrawing = true;
                    const { offsetX, offsetY } = getCanvasCoordinates(e);
                    [lastX, lastY] = [offsetX, offsetY];
                }
                
                // 绘制
                function draw(e) {
                    if (!isDrawing) return;
                    e.preventDefault();
                    
                    const { offsetX, offsetY } = getCanvasCoordinates(e);
                    
                    ctx.beginPath();
                    ctx.moveTo(lastX, lastY);
                    ctx.lineTo(offsetX, offsetY);
                    ctx.stroke();
                    [lastX, lastY] = [offsetX, offsetY];
                }
                
                // 触摸开始
                function handleTouchStart(e) {
                    e.preventDefault();
                    const touch = e.touches[0];
                    const mouseEvent = new MouseEvent('mousedown', {
                        clientX: touch.clientX,
                        clientY: touch.clientY
                    });
                    canvas.dispatchEvent(mouseEvent);
                }
                
                // 触摸移动
                function handleTouchMove(e) {
                    e.preventDefault();
                    const touch = e.touches[0];
                    const mouseEvent = new MouseEvent('mousemove', {
                        clientX: touch.clientX,
                        clientY: touch.clientY
                    });
                    canvas.dispatchEvent(mouseEvent);
                }
                
                // 停止绘制
                function stopDrawing() {
                    isDrawing = false;
                }
                
                // 获取画布坐标
                function getCanvasCoordinates(e) {
                    const rect = canvas.getBoundingClientRect();
                    
                    if (e.type.includes('mouse')) {
                        return {
                            offsetX: e.clientX - rect.left,
                            offsetY: e.clientY - rect.top
                        };
                    } else if (e.type.includes('touch')) {
                        return {
                            offsetX: e.touches[0].clientX - rect.left,
                            offsetY: e.touches[0].clientY - rect.top
                        };
                    }
                    
                    return { offsetX: 0, offsetY: 0 };
                }
                
                // 清除签名画布
                function clearSignatureCanvas() {
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    signatureData = null;
                    document.getElementById('modalSignaturePreview').style.display = 'none';
                    signatureImage = null;
                    document.getElementById('modalSignatureFile').value = '';
                }
            }
            
            // 打开模态框
            function openModal() {
                // 重置模态框内容
                document.getElementById('modalSignaturePreview').style.display = 'none';
                document.getElementById('modalSignatureFile').value = '';
                
                // 获取画布并清除
                const canvas = document.getElementById('modalSignatureCanvas');
                const ctx = canvas.getContext('2d');
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                signatureData = null;
                signatureImage = null;
                
                modal.style.display = 'block';
            }
            
            // 关闭模态框
            function closeModal() {
                modal.style.display = 'none';
            }
            
            // 确认签名
            function confirmSignature() {
                const canvas = document.getElementById('modalSignatureCanvas');
                const ctx = canvas.getContext('2d');
                
                // 检查是否有签名
                const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                const hasSignature = !imageData.data.every(channel => channel === 0);
                
                if (!hasSignature && !signatureImage) {
                    alert('请先进行签名或选择图片');
                    return;
                }
                
                // 更新签名显示
                let signatureContainer = document.querySelector('.attendance-footer .signature-area');
                if (!signatureContainer) {
                    // 创建签名显示区域
                    const footer = document.querySelector('.attendance-footer');
                    signatureContainer = document.createElement('div');
                    signatureContainer.className = 'signature-area';
                    signatureContainer.innerHTML = `
                        <div class="signature-label">复核（签字）：</div>
                        <div class="signature-display"></div>
                    `;
                    footer.insertBefore(signatureContainer, footer.firstChild);
                }
                
                const signatureDisplay = signatureContainer.querySelector('.signature-display');
                
                // 更新显示内容
                if (hasSignature) {
                    signatureData = canvas.toDataURL('image/png');
                    signatureDisplay.innerHTML = `<img src="${signatureData}" alt="手写签名">`;
                } else if (signatureImage) {
                    signatureDisplay.innerHTML = `<img src="${signatureImage}" alt="上传的签名">`;
                }
                
                closeModal();
            }
            
            // 清除签名
            function clearSignature() {
                const signatureDisplay = document.querySelector('.attendance-footer .signature-display');
                if (signatureDisplay) {
                    signatureDisplay.innerHTML = '';
                }
                signatureData = null;
                signatureImage = null;
            }
            
            // 生成考勤记录函数
            function generateAttendance() {
                const employeeNames = document.getElementById('employeeName').value.split(',').map(name => name.trim()).filter(name => name);
                const department = document.getElementById('department').value;
                const year = parseInt(document.getElementById('year').value);
                const month = parseInt(document.getElementById('month').value);
                const startDate = parseInt(document.getElementById('startDate').value);
                const endDate = parseInt(document.getElementById('endDate').value);
                
                // 固定概率设置
                const lateProbability = 1; // 迟到概率1%
                const absentProbability = 2; // 补卡概率2%
                
                // 解析节假日设置
                const holidays = {};
                const holidayText = document.getElementById('holidaySettings').value;
                holidayText.split('\n').forEach(line => {
                    const parts = line.trim().split('=');
                    if (parts.length === 2 && parts[0].trim() && parts[1].trim()) {
                        holidays[parts[0].trim()] = parts[1].trim();
                    }
                });
                
                // 解析补班日期设置
                const workdays = {};
                const workdayText = document.getElementById('workdaySettings').value;
                workdayText.split('\n').forEach(line => {
                    const parts = line.trim().split('=');
                    if (parts.length === 2 && parts[0].trim() && parts[1].trim()) {
                        workdays[parts[0].trim()] = parts[1].trim();
                    }
                });
                
                // 获取当月天数
                const daysInMonth = new Date(year, month, 0).getDate();
                
                let resultHTML = `
                    <div class="title"><h2>考勤记录表（${year}年${month}月）</h2></div>
                    <table>
                        <thead>
                            <tr>
                                <th>姓名</th>
                                <th>部门</th>
                                <th>日期</th>
                                <th>星期</th>
                                <th>上班打卡</th>
                                <th>下班打卡</th>
                                <th>考勤状态</th>
                                <th>备注</th>
                            </tr>
                        </thead>
                        <tbody>
                `;
                
                // 为每个员工生成考勤记录
                employeeNames.forEach(employeeName => {
                    for (let day = 1; day <= daysInMonth; day++) {
                        // 检查日期是否在选定的范围内
                        const isInRange = day >= startDate && day <= endDate;
                        
                        const date = new Date(year, month - 1, day);
                        const dayOfWeek = date.getDay(); // 0=周日, 1=周一, ..., 6=周六
                        const isWeekend = dayOfWeek === 0 || dayOfWeek === 6;
                        
                        // 检查是否是节假日
                        const holidayKey = `${month}-${day}`;
                        const isHoliday = holidays[holidayKey];
                        
                        // 检查是否是补班日
                        const isWorkday = workdays[holidayKey];
                        
                        // 生成随机考勤数据
                        let checkInTime = '-';
                        let checkOutTime = '-';
                        let status = '-';
                        let remark = '-';
                        let rowClass = '';
                        
                        if (!isInRange) {
                            // 不在选定日期范围内，显示"-"
                            rowClass = '';
                        } else if (isHoliday && !isWorkday) {
                            rowClass = 'holiday';
                            status = '-';
                            remark = isHoliday;
                            checkInTime = '-';
                            checkOutTime = '-';
                        } else if (isWorkday) {
                            rowClass = 'workday';
                            status = '补班';
                            remark = isWorkday;
                            
                            // 补班日考勤数据
                            const isAbsent = Math.random() * 100 < absentProbability;
                            
                            if (isAbsent) {
                                status = '<span class="status absent">补卡</span>';
                                checkInTime = '-';
                                checkOutTime = '-';
                                remark = '已补卡';
                            } else {
                                // 生成上班时间 (正常8:30，可能迟到)
                                const isLate = Math.random() * 100 < lateProbability;
                                let checkInHour = 8;
                                let checkInMinute = 30;
                                
                                if (isLate) {
                                    // 迟到时间不超过30分钟
                                    checkInMinute = 30 + Math.floor(Math.random() * 30); // 30-59分钟
                                    status = '<span class="status late">迟到</span>';
                                } else {
                                    // 正常上班时间有小范围波动
                                    checkInHour = 8;
                                    checkInMinute = 20 + Math.floor(Math.random() * 20); // 8:20-8:39
                                    status = '<span class="status normal">正常</span>';
                                }
                                
                                checkInTime = `${checkInHour.toString().padStart(2, '0')}:${checkInMinute.toString().padStart(2, '0')}`;
                            
                                // 下班时间固定为17:00之后
                                const checkOutHour = 17 + Math.floor(Math.random() * 2); // 17:00-18:59
                                const checkOutMinute = Math.floor(Math.random() * 60);
                                checkOutTime = `${checkOutHour.toString().padStart(2, '0')}:${checkOutMinute.toString().padStart(2, '0')}`;
                            }
                        } else if (isWeekend && !isWorkday) {
                            rowClass = 'weekend';
                            status = '周末';
                            remark = '休息日';
                            checkInTime = '-';
                            checkOutTime = '-';
                        } else {
                            // 工作日考勤数据
                            const isAbsent = Math.random() * 100 < absentProbability;
                            
                            if (isAbsent) {
                                status = '<span class="status absent">补卡</span>';
                                checkInTime = '-';
                                checkOutTime = '-';
                                remark = '已补卡';
                            } else {
                                // 生成上班时间 (正常8:30，可能迟到)
                                const isLate = Math.random() * 100 < lateProbability;
                                let checkInHour = 8;
                                let checkInMinute = 30;
                                
                                if (isLate) {
                                    // 迟到时间不超过30分钟
                                    checkInMinute = 30 + Math.floor(Math.random() * 30); // 30-59分钟
                                    status = '<span class="status late">迟到</span>';
                                } else {
                                    // 正常上班时间有小范围波动
                                    checkInHour = 8;
                                    checkInMinute = 20 + Math.floor(Math.random() * 20); // 8:20-8:39
                                    status = '<span class="status normal">正常</span>';
                                }
                                
                                checkInTime = `${checkInHour.toString().padStart(2, '0')}:${checkInMinute.toString().padStart(2, '0')}`;
                            
                                // 下班时间固定为17:00之后
                                const checkOutHour = 17 + Math.floor(Math.random() * 2); // 17:00-18:59
                                const checkOutMinute = Math.floor(Math.random() * 60);
                                checkOutTime = `${checkOutHour.toString().padStart(2, '0')}:${checkOutMinute.toString().padStart(2, '0')}`;
                            }
                        }
                        
                        // 星期几的中文表示
                        const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
                        const weekday = weekdays[dayOfWeek];
                        
                        // 添加行到表格
                        resultHTML += `
                            <tr class="${rowClass}">
                                <td>${employeeName}</td>
                                <td>${department}</td>
                                <td>${month}月${day}日</td>
                                <td>星期${weekday}</td>
                                <td>${checkInTime}</td>
                                <td>${checkOutTime}</td>
                                <td>${status}</td>
                                <td>${remark}</td>
                            </tr>
                        `;
                    }
                });
                
                resultHTML += `
                        </tbody>
                    </table>
                    
                    <div class="attendance-footer">
                        <div class="signature-area">
                            <div class="signature-label">经办人（签字）：</div>
                            <div class="signature-display"></div>
                        </div>
                        <div class="signature-time">报表导出时间：${currentDate.getFullYear()}年${currentDate.getMonth() + 1}月${currentDate.getDate()}日 ${currentDate.getHours().toString().padStart(2, '0')}:${currentDate.getMinutes().toString().padStart(2, '0')}:${currentDate.getSeconds().toString().padStart(2, '0')}</div>
                    </div>

                    <div class="attendance-notes">
                        <h4>考勤说明：</h4>
                        <p>1. <span class="status normal">正常</span>：按时上下班，无迟到早退情况。</p>
                        <p>2. <span class="status late">迟到</span>：实际打卡时间晚于上班时间。</p>
                        <p>3. <span class="status absent">补卡</span>：未正常打卡，但已提交补卡申请并审核通过。</p>
                        <p>4. <span class="status normal">节假日</span>：法定节假日或公司规定的休息日。</p>
                        <p>5. <span class="status normal">补班</span>：因节假日调休需要上班的日期。</p>
                    </div>
                `;
                
                document.getElementById('result').innerHTML = resultHTML;
                
                // 恢复已有的签名
                if (signatureData || signatureImage) {
                    const signatureDisplay = document.querySelector('.attendance-footer .signature-display');
                    if (signatureData) {
                        signatureDisplay.innerHTML = `<img src="${signatureData}" alt="手写签名">`;
                    } else if (signatureImage) {
                        signatureDisplay.innerHTML = `<img src="${signatureImage}" alt="上传的签名">`;
                    }
                }
            }
            
            // 处理文件选择
            function handleFileSelect(e) {
                const file = e.target.files[0];
                if (!file) return;
                
                // 检查文件类型
                if (!file.type.match('image.*')) {
                    alert('请选择图片文件');
                    return;
                }
                
                // 检查文件大小 (限制2MB)
                if (file.size > 2 * 1024 * 1024) {
                    alert('图片大小不能超过2MB');
                    return;
                }
                
                const reader = new FileReader();
                reader.onload = function(event) {
                    signatureImage = event.target.result;
                    const preview = document.getElementById('modalSignaturePreview');
                    preview.src = signatureImage;
                    preview.style.display = 'block';
                };
                reader.readAsDataURL(file);
            }
            
            // 初始化签名画布
            initSignatureCanvas();
            
            // 添加模态框事件监听
            closeBtn.addEventListener('click', closeModal);
            cancelBtn.addEventListener('click', closeModal);
            confirmBtn.addEventListener('click', confirmSignature);
            
            // 点击模态框外部关闭
            window.addEventListener('click', function(event) {
                if (event.target === modal) {
                    closeModal();
                }
            });
            
            // 生成初始考勤记录
            generateAttendance();
        });
    </script>
</body>
</html>